<template>
  <client-only>
    <mavon-editor
      class="mavon-editor"
      @imgAdd="$imgAdd"
      @imgDel="$imgDel"
      v-model="poetText"
      :toolbarsFlag="false"
      :subfield="false"
      defaultOpen="preview"
    />
  </client-only>
</template>
<script setup lang="ts">
const props = defineProps({
  text: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["update:text"]);

const poetText = computed({
  get: () => props.text,
  set: (val) => {
    emit("update:text", val);
    // poetText.value = val
  },
});
const $imgAdd = (pos: any, $file: string | Blob) => {
  // 第一步.将图片上传到服务器.
  var formdata = new FormData();
  formdata.append("image", $file);
  // axios({
  //   url: "server url",
  //   method: "post",
  //   data: formdata,
  //   headers: { "Content-Type": "multipart/form-data" },
  // }).then((url) => {
  //   // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
  //   /**
  //    * $vm 指为mavonEditor实例，可以通过如下两种方式获取
  //    * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
  //    * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
  //    */
  //   $vm.$img2Url(pos, url);
  // });
};
const $imgDel = (pos: any, $file: string | Blob) => {
  // 第一步.将图片上传到服务器.
  var formdata = new FormData();
  formdata.append("image", $file);
  // axios({
  //   url: "server url",
  //   method: "post",
  //   data: formdata,
  //   headers: { "Content-Type": "multipart/form-data" },
  // }).then((url) => {
  //   // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
  //   /**
  //    * $vm 指为mavonEditor实例，可以通过如下两种方式获取
  //    * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
  //    * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
  //    */
  //   $vm.$img2Url(pos, url);
  // });
};
</script>
<style lang="scss" scoped>
.mavon-editor {
  height: 100%;
}
</style>
